<template>
	<div class="user">
		<div class="common-form">编辑转盘</div>
		<div class="product-content">
			<el-form ref="form" :model="form" :rules="formRules" label-width="150px">
				<el-form-item label="活动状态" prop="status" :rules="[{required: true,message: ' '}]">
					<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#999999" :active-value="1"
						:inactive-value="0">
					</el-switch>
				</el-form-item>
				<el-form-item label="活动开始时间" prop="start_time">
					<el-date-picker v-model="form.start_time" type="datetime" placeholder="活动开始时间"
						format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
				</el-form-item>
				<el-form-item label="活动结束时间" prop="end_time">
					<el-date-picker v-model="form.end_time" type="datetime" placeholder="活动结束时间"
						format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
				</el-form-item>
				<el-form-item label="参与用户" :rules="[{ required: true, message: '' }]" prop="user_type">
					<div>
						<el-radio-group v-model="form.user_type" @change="changeUserType">
							<el-radio :label="0">全部用户</el-radio>
							<el-radio :label="1">部分用户</el-radio>
						</el-radio-group>
					</div>
					<div v-if="form.user_type == 1">
						<el-select class="max-w460 ww100" v-model="form.grades" multiple placeholder="请选择" size="small">
							<el-option v-for="(item, index) in gradeList" :key="index" :label="item.name"
								:value="item.grade_id"></el-option>
						</el-select>
					</div>
				</el-form-item>
				<el-form-item label="每人每天抽奖次数" prop="times" :rules="[{required: true,message: ' '}]">
					<el-input type="text" v-model="form.times" placeholder="请输入每日次数" class="max-w460"></el-input><span
						class="ml10">次</span>
				</el-form-item>
				<el-form-item label="每人抽奖总次数" prop="total_num" :rules="[{ required: true, message: ' ' }]">
					<el-input type="text" v-model="form.total_num" placeholder="请输入每人抽奖总次数"
						class="max-w460"></el-input><span class="ml10">次</span>
				</el-form-item>
				<el-form-item label="单次抽奖消耗积分" prop="points" :rules="[{required: true,message: ' '}]">
					<el-input type="text" v-model="form.points" placeholder="请输入消耗积分" class="max-w460"></el-input>
				</el-form-item>
				<el-form-item label="活动背景图" prop="file_path">
					<el-row>
						<el-button type="primary" @click="openUpload" size="small">选择图片</el-button>
						<div v-if="form.file_path!=''" class="img">
							<img :src="form.file_path" width="100" height="100" />
						</div>
					</el-row>
					<div class="gray9">建议图片上传尺寸为750px*1340px</div>
				</el-form-item>

				<el-form-item label="规则选择" :rules="[{ required: true, message: ' ' }]">
					<div class="d-b-s">
						<div>
							<div class="table-head"></div>
							<draggable v-model="tableData" tag="ul" item-key="index">
								<template #item="{ element,index }">
									<li class="table-no">
										<!-- <span>{{ index + 1 }}</span> -->
										<el-icon>
											<Rank />
										</el-icon>
									</li>
								</template>
							</draggable>
						</div>

						<el-table :data="tableData" @current-change="handleCurrentChange" ref="singleTable">
							<el-table-column prop="sort" label="序号" type="index"></el-table-column>
							<el-table-column prop="image" label="图片" :width="80">
								<template #default="scope">
									<img v-img-url="hasImages(scope.row.image)" alt="" :width="50" :height="50" />
								</template>
							</el-table-column>
							<el-table-column prop="name" label="名称">
								<template #default="scope">
									<div style="white-space: nowrap;" class="text-ellipsis">{{scope.row.name}}</div>
								</template>
							</el-table-column>
							<el-table-column prop="type" label="类型">
								<template #default="scope">
									<span v-if="scope.row.type == 0">无礼品</span>
									<span v-if="scope.row.type == 1">优惠券</span>
									<span v-if="scope.row.type == 2">积分</span>
									<span v-if="scope.row.type == 3">商品</span>
									<span v-if="scope.row.type == 4">余额</span>
								</template>
							</el-table-column>
							<el-table-column prop="prompt" label="提示语">
								<template #default="scope">
									<div style="white-space: nowrap;" class="text-ellipsis">{{scope.row.prompt}}</div>
								</template>
							</el-table-column>
							<el-table-column prop="stock" label="活动库存"></el-table-column>
							<el-table-column prop="draw_num" label="已送出"></el-table-column>
							<el-table-column prop="weight" label="奖品权重"></el-table-column>
							<el-table-column prop="is_default" label="奖品概率" :rules="[{ required: true, message: ' ' }]">
								<template #default="scope">
									{{probability(scope.row.weight)}}%
								</template>
							</el-table-column>
							<el-table-column prop="is_default" label="是否默认" :rules="[{ required: true, message: ' ' }]">
								<template #default="scope">
									<el-switch @change="changeSwitch(scope.row)"
										:model-value="scope.row.is_default == 1" active-color="#13ce66"
										inactive-color="#999999">
									</el-switch>
								</template>
							</el-table-column>
							<el-table-column prop="is_play" label="是否播报">
								<!-- 0 不播报 1 播报 -->
								<template #default="scope">
									<el-switch v-model="scope.row.is_play" active-color="#13ce66" :active-value="1"
										:inactive-value="0" inactive-color="#999999">
									</el-switch>
								</template>
							</el-table-column>
							<el-table-column prop="address" label="操作">
								<template #default="scope">
									<el-button type="primary" link size="small"
										@click="editFunc(scope.row,scope.$index)">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>

					</div>
					<div class="gray9">奖品必须设置为8个，建议图片上传尺寸为200px*200px，列表中拖拽左侧图标可调整奖品在九宫中的位置
					</div>
				</el-form-item>
				<el-form-item label="活动规则" prop="content" :rules="[{required: true,message: ' '}]">
					<el-input type="textarea" :rows="3" v-model="form.content" placeholder="请输入活动规则"
						class="max-w460"></el-input>
				</el-form-item>
			</el-form>
			<!--提交-->
			<div class="common-button-wrapper">
				<el-button type="info" @click="gotoBack">返回</el-button>
				<el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
			</div>
		</div>
		<el-dialog title="添加积分" v-model="isPoint">
			<el-input v-model="point" autocomplete="off"></el-input>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="closePointFunc(false)">取 消</el-button>
					<el-button type="primary" @click="closePointFunc(true)">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		<!--上传图片组件-->
		<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
		<EditDialog :model="formModel" v-if="isEdit" @closeDialog="closeEdit"></EditDialog>
	</div>
</template>
<script>
	import {
		EditLottery,
		getData
	} from '@/api/lottery.js';
	import EditDialog from './dialog/edit.vue';
	import Upload from '@/components/file/Upload.vue';
	import {
		formatModel
	} from '@/utils/base.js';
	import draggable from 'vuedraggable';
	export default {
		components: {
			/*选择优惠券件*/
			EditDialog,
			Upload,
			draggable
		},
		data() {
			return {
				form: {
					prize: [],
					points: 0,
					is_times: 0,
					coupon_num: 1,
					times: '',
					name: '',
					lottery_id: 0,
					image_id: '',
					content: '',
					file_path: '',
					status: 0,
					user_type: 0,
					grades: [],
					start_time: "",
					end_time: "",
					total_num: "",
				},
				file_path: '',
				gradeList: {},
				tableData: [],
				loading: false,
				open_add: false,
				/*是否打开选择商品*/
				isproduct: false,
				exclude_ids: [],
				spec_type: 10,
				/*是否打开图片选择*/
				isupload: false,
				formRules: {
					image_id: [{
						required: true,
						message: '请上传背景图',
						trigger: 'blur'
					}],
				},
				/*左边长度*/
				formLabelWidth: '120px',
				isPoint: false,
				point: '',
				isNothing: false,
				isLottery: -1,
				prize_ids: [],
				isEdit: false,
				formModel: {},
				formIndex: 0
			};
		},
		created() {
			/*获取数据*/
			this.getData();
		},
		methods: {
			changeUserType(e) {
				this.form.gradeIdList = [];
			},
			probability(n) {
				const totalWeight = this.tableData.reduce((sum, item) => sum + (item.weight * 1), 0);
				if (!totalWeight) {
					return 0
				} else {
					return ((n / totalWeight) * 100).toFixed(2);
				}
			},
			editFunc(e, n) {
				this.formIndex = n;
				this.formModel = JSON.parse(JSON.stringify(e));
				console.log(this.formModel);
				this.isEdit = true;
			},
			closeEdit(e) {
				this.isEdit = false;
				console.log(e)
				if (e.type == "success") {
					this.tableData[this.formIndex] = e.form;
				}
			},
			hasImages(e) {
				if (e) {
					return e;
				} else {
					return '';
				}
			},
			/*添加优惠券*/
			addCoupon() {
				this.open_add = true;
			},
			/*关闭优惠券*/
			closeProductDialogFunc(e) {
				let self = this;
				self.open_add = e.openDialog;
				if (e.type == 'success') {
					let params = {
						prize_id: 0,
						award_id: e.params.coupon_id,
						name: e.params.name,
						stock: 1,
						type: 1,
						image: '',
						points: 0,
						is_default: 0,
						is_play: 0
					}
					self.tableData.push(params);
				}
			},

			/*添加商品*/
			addProduct() {
				this.isproduct = true;
			},
			/*关闭商品*/
			closeProductFunc(e) {
				let self = this;
				self.isproduct = e.openDialog;
				if (e.type == 'success') {
					let params = {
						prize_id: 0,
						award_id: e.params.product_id,
						name: e.params.product_name,
						stock: 1,
						type: 3,
						image: e.params.product_image,
						points: 0,
						is_default: 0,
						is_play: 0
					}
					self.tableData.push(params);
				}
			},
			addPoint() {
				this.isPoint = true;
			},
			closePointFunc(e) {
				let self = this;
				self.isPoint = e.openDialog;
				let points = this.point;
				if (e) {
					let params = {
						prize_id: 0,
						award_id: 0,
						name: '积分',
						points: 0,
						stock: 1,
						type: 2,
						image: '',
						is_default: 0,
						is_play: 0
					}
					params.points = points;
					params.name = points + '积分';
					self.tableData.push(params);
				}
			},
			addNothing() {
				let self = this;
				let params = {
					prize_id: 0,
					award_id: 0,
					name: '祝你好运',
					stock: 1,
					type: 0,
					image: '',
					points: 0,
					is_default: 0,
					is_play: 0
				}
				self.tableData.push(params);
			},
			/*获取数据*/
			getData() {
				let self = this;
				getData({}, true).then(res => {
					self.gradeList = res.data.gradeList;
					self.form = formatModel(self.form, res.data.data);
					// 等级id转换成数组
					if (self.form.grades.length > 0) {
						for (let i = 0; i < self.form.grades.length; i++) {
							self.form.grades[i] = parseInt(self.form.grades[i]);
						}
					}
					if (self.form.prize != null) {
						self.tableData = self.form.prize;
						self.prize_ids = [];
					}
				}).catch(error => {});
			},
			delProduct(item) {
				let self = this;
				let n = self.prodcutData.indexOf(item);
				self.prodcutData.splice(n, 1);
				self.form.product.splice(n, 1);
			},
			delcoupon(item) {
				let self = this;
				let n = self.tableData.indexOf(item);
				if (item.prize_id) {
					self.prize_ids = [...self.prize_ids, item.prize_id];
				}
				self.tableData.splice(n, 1);
			},
			/*提交表单*/
			onSubmit() {
				let self = this;
				let form = self.form;
				if (self.tableData.length != 8) {
					ElMessage.error('请设置8项礼品信息');
					return
				}
				let flag = false;
				self.tableData.forEach((item, index) => {
					if (item.is_default == 1) {
						flag = true;
						return
					}
				})
				if (!flag) {
					ElMessage.error('请设置默认项');
					return
				}
				form.prize = self.tableData;
				if (self.prize_ids.length > 0) {
					form.prize_ids = self.prize_ids;
				} else {
					form.prize_ids = '';
				}
				self.$refs.form.validate((valid) => {
					if (valid) {
						self.loading = true;
						if (!form.start_time) {
							form.start_time = ''
						}
						if (!form.end_time) {
							form.end_time = ''
						}
						EditLottery(form, true).then(data => {
								self.loading = false;
								if (data.code == 1) {
									ElMessage({
										message: data.msg,
										type: 'success'
									});
									self.tableData = [];
									self.getData();
								} else {
									self.loading = false;
								}
							})
							.catch(error => {
								self.loading = false;
							});
					}
				});

			},
			changeImg(e) {
				this.isLottery = this.tableData.indexOf(e);
				this.isupload = true;
			},
			/*上传*/
			openUpload(e) {
				this.type = e;
				this.isupload = true;
			},
			/*获取图片*/
			returnImgsFunc(e) {

				if (e != null && e.length > 0) {
					if (this.isLottery != -1) {
						this.tableData[this.isLottery].image = e[0].file_path;
					} else {
						this.form.file_path = e[0].file_path;
						this.form.image_id = e[0].file_id;
					}

				}
				this.isLottery = -1;
				this.isupload = false;
			},
			/*返回上一页面*/
			gotoBack() {
				this.$router.back(-1);
			},
			setCurrent(row) {
				this.$refs.singleTable.setCurrentRow(row);
			},
			handleCurrentChange(val) {
				this.currentRow = val;
			},
			changeSwitch(row) {
				this.tableData.forEach((item, index) => {
					item.is_default = 0;
				})
				row.is_default = 1
			},
			changePlaySwitch(e, row) {
				row.is_play = e;
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
		background: none;
	}

	.table-head {
		height: 48.8px;
		border: 1px solid #EEE;
		background-color: #EAEDF4;
		width: 80px;
		display: flex;
		// justify-content: center;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		font-weight: 600;
		padding: 0 12px;
		line-height: 32px !important;
		font-size: 12px !important;
		color: #101010 !important;
	}

	.table-no {
		padding: 8px 0;
		min-width: 0;
		box-sizing: border-box;
		text-overflow: ellipsis;
		vertical-align: middle;
		position: relative;
		text-align: left;
		height: 66.8px;
		border-bottom: 1px solid #eee;
		width: 80px;
		display: flex;
		// justify-content: center;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		font-weight: 600;
		padding: 0 12px;
		line-height: 32px !important;
		font-size: 12px !important;
		color: #101010 !important;
		cursor: all-scroll;
	}
</style>